<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 动画操作:
		show() 功能:显示效果 本质:display:block
		hide() 功能：隐藏效果 本质: display:none
		
		slideDown() 功能:  (滑动式)向下效果
		slideUp()   功能:(滑动式)向上效果
		
		fadeIn(毫秒数)  功能:淡入效果
		fade0ut(毫秒数)  功能:淡出效果
		
		hover()  功能:悬停切换效果
		-->
		<style>
			div{
				width: 200px;
				height: 200px;
				background-color: aquamarine;
				display: none;
			}
		</style>
		<script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<button id="show">显示</button>
		<button id="hide">隐藏</button>
		<button id="sd">(滑动式)向下效果</button>
		<button id="su">(滑动式)向上效果</button>
		<button id="fi">淡入效果</button>
		<button id="fo">淡出效果</button>
		<div></div>
		<script>
			/*1.显示和隐藏效果*/
			$("#show").click(function(){
				$("div").show();
			});
			$("#hide").click(function(){
				$("div").hide();
			});
			$("#sd").click(function(){
				$("div").slideDown();
			});
			$("#su").click(function(){
				$("div").slideUp();
			});
			$("#fi").click(function(){
				$("div").fadeIn();
			});
			$("#fo").click(function(){
				$("div").fade0ut();
			});
		</script>
	</body>
</html>